{% extends "base.html" %}{% load i18n crm_tags %}
{% block title %}{% if order %}{% blocktranslate trimmed with number=order.number %}Edit order {{ number }}{% endblocktranslate %}{% else %}{% translate "New order" %}{% endif %}{% endblock %}
{% block content %}
<div class="page-head">
  <div>
    <h1>{% if order %}{% blocktranslate trimmed with number=order.number %}Edit order {{ number }}{% endblocktranslate %}{% else %}{% translate "New order" %}{% endif %}</h1>
    <p>{% translate "For" %} <a href="{{ contact.get_absolute_url }}">{{ contact.name }}</a>, <span class="phone">{{ contact.phone_display }}</span></p>
  </div>
</div>

<form method="post" class="form" novalidate style="max-width:880px">
  {% csrf_token %}
  {% if form.errors or items.non_form_errors or items.total_error_count %}<div class="form-errors">{% translate "Some details need fixing. Look for the red notes below." %}</div>{% endif %}

  <section class="panel">
    <div class="panel-head"><h2>{% translate "Items" %}</h2><span class="muted small">{% translate "Total" %}: <span class="money" id="order-total">—</span></span></div>
    {{ items.management_form }}
    {% if items.non_form_errors %}<div class="form-errors">{{ items.non_form_errors|join:" " }}</div>{% endif %}
    <div class="items-table" data-items>
      <div class="items-row items-head"><span>{% translate "Item" %}</span><span>{% translate "How many" %}</span><span>{% translate "Price each (TZS)" %}</span><span>{% translate "Line total" %}</span><span></span></div>
      {% for f in items %}
      <div class="items-row{% if f.errors %} has-error{% endif %}" data-item-row{% if not f.instance.pk and not f.has_changed and forloop.counter > 3 %} data-spare{% endif %}>
        <span>{% for hidden in f.hidden_fields %}{{ hidden }}{% endfor %}{{ f.name }}{% for e in f.name.errors %}<span class="errors">{{ e }}</span>{% endfor %}</span>
        <span>{{ f.quantity }}{% for e in f.quantity.errors %}<span class="errors">{{ e }}</span>{% endfor %}</span>
        <span>{{ f.unit_price }}{% for e in f.unit_price.errors %}<span class="errors">{{ e }}</span>{% endfor %}</span>
        <span class="money line-total" data-line-total>—</span>
        <span>{% if f.instance.pk %}<label class="small muted">{{ f.DELETE }} {% translate "Remove" %}</label>{% endif %}</span>
      </div>
      {% endfor %}
    </div>
    <button class="btn btn-small" type="button" data-add-item style="margin-top:10px">{% translate "Add another item" %}</button>
    <datalist id="item-names">{% for n in item_names %}<option value="{{ n }}">{% endfor %}</datalist>
  </section>

  <section class="panel">
    <div class="panel-head"><h2>{% translate "Payment received" %}</h2></div>
    <div class="form-grid">
      {% include "_field.html" with field=form.amount_received %}
      <div></div>
      {% include "_field.html" with field=form.method wide=True %}
      <div data-show-when="{{ form.method.html_name }}=mobile_money">{% include "_field.html" with field=form.network %}</div>
      <div data-show-when="{{ form.method.html_name }}=bank">{% include "_field.html" with field=form.bank %}</div>
      <div data-show-when="{{ form.method.html_name }}!=cash">{% include "_field.html" with field=form.reference %}</div>
      {% include "_same_payment.html" with form=form %}
    </div>
  </section>

  <section class="panel">
    <div class="panel-head"><h2>{% translate "Delivery" %}</h2></div>
    <div class="form-grid">
      {% include "_field.html" with field=form.region %}
      {% include "_field.html" with field=form.district %}
      {% include "_field.html" with field=form.address wide=True %}
      {% include "_field.html" with field=form.receiver_phone %}
      {% include "_field.html" with field=form.deliver_on %}
      {% include "_field.html" with field=form.note wide=True %}
    </div>
  </section>

  <div class="actions">
    <button class="btn btn-primary" type="submit">{% if order %}{% translate "Save order" %}{% else %}{% translate "Save order" %}{% endif %}</button>
    <a class="btn btn-quiet" href="{% if order %}{{ order.get_absolute_url }}{% else %}{{ contact.get_absolute_url }}{% endif %}">{% translate "Cancel" %}</a>
  </div>
</form>
{% endblock %}